<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:insert="~{include :: header('课程学习记录列表')}" />
    <th:block th:insert="~{include :: bootstrap-table-css}" />
</head>
<body class="hold-transition">
<div class="container-fluid mb-2">
    <div class="row">
        <div class="toolbar" id="toolbar" role="group">
            <form id="formId" class="form-inline">
                <select class="form-control mr-1" name="searchType">
                    <option value="0">按课程</option>
                    <option value="1">按章节</option>
                </select>
                <input class="form-control mr-1" placeholder="id/名称关键字" type="text" name="searchKey" />
                <a class="btn btn-primary btn-rounded mr-1" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                <a class="btn btn-warning btn-rounded" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
            </form>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" class="table-striped"></table>
        </div>
    </div>
</div>
<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: bootstrap-table-js}" />
<script th:inline="javascript">
    $(function() {
        var options = {
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            url: "/course/study/list.json",
            modalName: "学习记录",
            columns: [
                {
                    field: 'id',
                    title: 'id',
                },
                {
                    field: 'userId',
                    title: '用户Id'
                },
                {
                    field: 'courseName',
                    title: '课程名称'
                },
                {
                    field: 'nodeName',
                    title: '章节'
                },
                {
                    field: 'updateTime',
                    title: '最后观看时间'
                }]
        };
        $.table.init(options);
    });
</script>
</body>
</html>